<!-- 旧版人才画像 -->
<template>
  <div
    class="result-con"
    :class="[chainType == 'chain' ? 'chain-result-con' : '']"
  >
    <div class="result-total">
      <p class="totla" v-if="!loading && resultData.length > 0">
        找到约{{ numFormat(total) }}条相关结果
      </p>
      <p class="totla" v-else>{{ emptyText }}</p>
      <!-- <span>按专利量排序<i class="el-icon-sort-down"></i><i class="el-icon-sort-up"></i></span> -->
    </div>
    <!-- 结果列表 -->
    <vue-scroll
      :ops="scrollOps"
      class="scroll-ul"
      v-if="!loading && resultData.length > 0"
    >
      <ul class="ul">
        <li v-for="(item, index) in resultData" :key="index">
          <div class="li-title">
            <div class="name">
              <h2 class="name" @click="toDetail(item)">
                {{ item.name }}
              </h2>
              <span class="li-button">
                <!-- 收藏 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="!item.isCollect ? '收藏' : '取消收藏'"
                  placement="top"
                >
                  <a
                    class="collect el-icon-star-off"
                    :class="{
                      active: item.isCollect,
                      'el-icon-star-on': item.isCollect,
                      'el-icon-star-off': !item.isCollect,
                    }"
                    @click="collet(item, index)"
                  ></a>
                </el-tooltip>
              </span>
            </div>
            <p class="company" @click="toDetail(item)">
              <img src="../../../../../assets/img/company-icon.png" alt="" />
              <span>{{ item.org }}</span>
            </p>
          </div>
          <div class="li-content" @click="toDetail(item)">
            <dl class="content">
              <dt>优势领域:</dt>
              <dd :title="(item.ipcs || []).join('；')">
                {{ (item.ipcs || []).join("；") }}
              </dd>
            </dl>
            <div class="number">
              <i>
                <img src="../../../../../assets/img/patent-icon.png" alt="" />
              </i>
              <span>专利数量</span>
              <b>{{ item.count }}</b>
            </div>
          </div>
        </li>
      </ul>
    </vue-scroll>
    <el-pagination
      background
      v-if="!loading && resultData.length > 0"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper"
      :current-page.sync="ipi"
      :page-size="ips"
      :total="total"
      class="elpagination"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    chainType: {
      type: String,
      default: "", // 产业技术链调用时值为chain，其余沿用旧接口
    },
    advancedForm: {
      type: Object,
    },
    searchTxt: {
      type: String,
    },
  },
  data() {
    return {
      loading: true,
      ipi: 1,
      ips: 12,
      total: 0,
      resultAllData: [],
      resultData: [],
      emptyText: "数据加载中...",
      scrollOps: {
        vuescroll: {
          mode: "native",
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: "rgba(255,255,255,.1)",
          gutterOfEnds: "10px",
        },
        bar: {
          background: "#c7c8ca",
          size: "8px",
        },
      },
    };
  },
  mounted() {
    if (this.$route.query.ipi) {
      this.ipi = Number(this.$route.query.ipi);
    }
    this.search(this.advancedForm, this.ipi);
  },
  watch: {
    advancedForm: {
      handler(newVal) {
        this.search(newVal, 1);
      },
      deep: true,
    },
  },
  methods: {
    numFormat(num) {
      var res = num.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
      return res;
    },
    search(advancedForm, ipi) {
      this.ipi = ipi;
      this.loading = true;
      this.emptyText = "数据加载中...";
      if (this.chainType == "chain") {
        this.$post(this.$Url.chain.authorRelNews, {
          ...advancedForm,
          // name: "",
          // eid: "",
          page: ipi,
          limit: this.ips,
          keyword: "",
        })
          .then((res) => {
            this.handleResData(res);
          })
          .catch((e) => {
            this.emptyText = "暂无数据";
          });
        return;
      }
      let params = {
        ipi: this.ipi,
        ips: this.ips,
        name: this.searchTxt,
        ...advancedForm,
      };
      this.$get(this.$Url.EnergyTalent.listPage, params)
        .then((res) => {
          this.handleResData(res);
        })
        .catch((e) => {
          this.emptyText = "暂无数据";
        });
    },
    handleResData(res) {
      let data = res.data;
      this.loading = false;
      this.resultData = [];
      this.resultAllData = [];
      this.total = data.total;
      if (data.result.length && data.result.length > 0) {
        data.result.forEach((i, index) => {
          this.resultAllData.push(i);
          this.isCollect(i.pid, this.resultAllData[index]);
        });
        this.resultData = this.resultAllData.filter((v, index) => {
          let valIndex = (this.ipi - 1) * this.ips;
          return index >= valIndex && index < valIndex + this.ips;
        });
      } else {
        this.emptyText = "暂无数据";
      }
    },
    // 是否收藏
    isCollect(pid, sth) {
      this.$get(this.$Url.EnergyTalent.isCollect, {
        pid,
      }).then((res) => {
        let data = res.data;
        this.$set(sth, "isCollect", data);
      });
    },
    // 进入详情页
    toDetail(item) {
      let url = this.$router.resolve({
        name: "EnergyTalentDetailIntroduction",
        query: {
          key: item.pid || "",
          name: item.name || "",
          companyName: item.org || "",
          count: item.count || 0,
        },
      });
      window.open(url.href, "_blank");
    },
    collet(item, index) {
      if (item.isCollect) {
        // 取消收藏
        this.$get(this.$Url.EnergyTalent.cancelCollectExpert, {
          pid: item.pid,
        }).then((res) => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "取消收藏成功",
            });
            this.$set(this.resultData[index], "isCollect", !item.isCollect);
          } else {
            this.$message({
              type: "error",
              message: "取消收藏失败",
              duration: 1000,
            });
          }
        });
      } else {
        this.$get(this.$Url.EnergyTalent.collectExpert, {
          pid: item.pid,
        }).then((res) => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "收藏成功",
              duration: 1000,
            });
            this.$set(this.resultData[index], "isCollect", !item.isCollect);
          } else {
            this.$message({
              type: "error",
              message: "收藏失败",
              duration: 1000,
            });
          }
        });
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.ipi = val;
      if (this.chainType != "chain") {
        this.$router.push({
          name: "PDSearchResult",
          query: {
            keyword: this.searchTxt,
            ipi: this.ipi,
          },
        });
      }
      this.resultData = this.resultAllData.filter((v, index) => {
        let valIndex = (this.ipi - 1) * this.ips;
        return index >= valIndex && index < valIndex + this.ips;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.result-con {
  flex: auto;
  overflow: hidden;
  padding: 0.06rem 0.28rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  background: #f6f7fb;
  .result-total {
    color: #838698;
    font-size: 0.14rem;
    line-height: 0.14rem;
    height: 0.36rem;
    flex: none;
    padding-top: 0.18rem;
    padding-bottom: 0.04rem;
    p {
      float: left;
    }
    span {
      display: inline-block;
      float: right;
    }
  }
  .scroll-ul {
    flex: auto;
    margin-left: -0.14rem;
    .ul {
      display: flex;
      flex-wrap: wrap;
      padding-right: 0.24rem;
      margin-bottom: 0.2rem;
      > li {
        width: calc((100% - 0.96rem) / 4);
        height: 2.44rem;
        background: #fff;
        margin: 0.14rem 0.1rem 0.1rem 0.14rem;
        padding: 0 0.22rem 0 0.18rem;
        overflow: hidden;
        border-radius: 0.08rem;
        border: 1px solid #e4e5e9;
        box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
        position: relative;
        transition: all 0.4s ease;
        &:hover {
          box-shadow: 0 2px 12px 4px rgba(7, 2, 70, 0.2);
        }
        &::before {
          content: "";
          width: 0.04rem;
          height: 0.36rem;
          background: $mainColor;
          border-radius: 0 0.04rem 0.04rem 0;
          position: absolute;
          left: 0;
          top: 0.18rem;
        }
        .li-title {
          width: 100%;
          border-bottom: 1px solid #f7f7f7;
          padding-top: 0.2rem;
          .name {
            color: #151b31;
            height: 0.3rem;
            line-height: 0.3rem;
            h2 {
              padding: 0 0.35rem 0 0.06rem;
              background: $hoverColor;
              border-radius: 0 0.15rem 0.15rem 0;
              font-style: italic;
              font-size: 0.22rem;
              float: left;
            }
            .li-button {
              float: right;
              color: #9a9b9e;
              font-size: 0.2rem;
              cursor: default;
              .collect {
                margin-right: 0.24rem;
              }
              .el-icon-star-on {
                color: $color120;
                font-size: 0.24rem;
                margin-right: 0.22rem;
              }
              .score {
                font-size: 0.15rem;
              }
            }
          }
          .company {
            line-height: 0.52rem;
            color: #919397;
            font-size: 0.16rem;
            img {
              display: inline-block;
              width: 0.12rem;
              margin-right: 0.13rem;
              vertical-align: middle;
            }
            span {
              display: inline-block;
              width: calc(100% - 0.27rem);
              vertical-align: middle;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .li-content {
          width: 100%;
          .content {
            width: 100%;
            line-height: 0.24rem;
            font-size: 0.14rem;
            color: #a6a8bc;
            height: 0.82rem;
            padding: 0.1rem 0 0.13rem 0;
            background-color: transparent;
            dd {
              line-height: 0.2rem;
              font-size: 0.15rem;
              color: #585858;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .number {
            height: 0.3rem;
            color: #82d1d5;
            font-size: 0.12rem;
            display: flex;
            align-items: center;
            i {
              display: inline-block;
              width: 0.3rem;
              height: 0.3rem;
              border-radius: 0.15rem;
              background: #e7fdff;
              display: flex;
              align-items: center;
              justify-content: center;
              float: left;
              margin-right: 0.13rem;
            }
            b {
              font-size: 0.22rem;
              font-style: italic;
              font-weight: 700;
              margin-left: 0.18rem;
            }
          }
        }
      }
    }
  }
  .el-pagination.is-background {
    text-align: right;
    font-weight: 700;
    margin: 0.06rem 0 0.24rem 0;
    ::v-deep .el-pager {
      li:not(.disabled).active {
        background: transparent;
        color: $mainColor;
      }
      li {
        color: #c1c6d2;
        font-size: 0.16rem;
        font-weight: 400;
        background: #f6f7fb;
      }
    }
    ::v-deep .btn-prev {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .btn-next {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .el-pagination__jump {
      color: #c1c6d2;
      font-size: 0.16rem;
      .el-input--medium .el-input__inner {
        height: 0.26rem;
        border: 1px solid $mainColor;
        border-radius: 0;
      }
    }
  }
}
.chain-result-con {
  padding: 0;
  .scroll-ul .ul {
    padding-right: 0;
  }
}
</style>
